<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .clearfix::after {
        content: "";
        display: table;
        /*? 不受左右两侧浮动元素的影响*/
        clear: both;
    }
    .float-left {
        float: left;
    }
    .float-right {
        float: right;
    }
    .parent {
        overflow: hidden;
        border: 1px solid red;
    }
    .float-left2 {
        float: left;
    }
    .float-right2 {
        float: right;
    }
    .container {
        border: 1px solid red;
    }
</style>
<body>
<!--? 伪元素清除，最好方式-->
<div class="clearfix" style="border: 1px solid red">
    <div class="float-left">左浮动元素</div>
    <div class="float-right">右浮动元素</div>
</div>
<!--? 父类开启BFC-->
<div class="parent">
    <div class="float-left2">左浮动元素</div>
    <div class="float-right2">右浮动元素</div>
</div>
<!--? 直接加clear:both了的实际元素-->
<div class="container">
    <div style="float: left">左浮动元素</div>
    <div style="float: right">右浮动元素</div>
    <div style="clear:both"></div>
</div>
</body>
</html>
